<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--  直接输出-->
  <ul>
    <li>{{info.name}}</li>
    <li>{{info.age}}</li>
    <li>{{info.height}}</li>
    <li>{{info.weight}}</li>
  </ul>
  <hr>
  <hr>
  <!--  1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  <hr>
  <hr>
  <!--  2.获取key和value         前面为value，后面为key   格式(value,key)-->
  <ul>
    <li v-for="(value,key) in info">{{key}}:{{value}}</li>
  </ul>
  <hr>
  <hr>
  <!--  3.获取key和value，index  格式：(value,key,index)-->
  <ul>
    <li v-for="(value,key,index) in info">[{{index}}]{{key}}:{{value}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello zk!",
      info :{
        name:'zk',
        age:20,
        height:1.88,
        weight:68.5,
      },
    },

  })
</script>
</body>
</html>
